<template>
  <div id="content">
    <div class="banner">个人中心</div>
    <div class="header">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="我的事项" name="1" style="text-align:left">
          <van-cell
            title="我的待办事项"
            :value="thing.wait"
            title-class="numTitle"
            value-class="countNumber"
          />
          <van-cell
            title="我的已办事项"
            :value="thing.complete"
            title-class="numTitle"
            value-class="countNumber"
          />
          <van-cell
            title="我的待审事项"
            :value="thing.apply"
            title-class="numTitle"
            value-class="countNumber"
          />
          <van-cell
            title="我的已审事项"
            :value="thing.checked"
            title-class="numTitle"
            value-class="countNumber"
          />
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="quck">
      <van-collapse v-model="activePass">
        <van-collapse-item title="快速通道" name="1" style="text-align:left">
          <van-cell title="新增光纤接入申请" to="/add" class="addApply">
            <van-icon name="arrow" color="#fff" />
          </van-cell>
          <van-cell title="光纤拆搬迁申请" to="/move" class="moveApply">
            <van-icon name="arrow" color="#fff" />
          </van-cell>
          <van-cell title="虚拟化服务器申请" to="/server" class="serverApply">
            <van-icon name="arrow" color="#fff" />
          </van-cell>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="quck">
      <van-collapse v-model="activeMy">
        <van-collapse-item title="个人中心" name="1" style="text-align:left">
          <van-cell title="申请列表" to="/applyList" class="addApply">
            <van-icon name="arrow" color="#fff" />
          </van-cell>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Collapse, CollapseItem, Cell, Icon } from 'vant'

Vue.use(Cell).use(Collapse).use(CollapseItem).use(Icon)

export default {
  data()
  {
    return {
      activeNames: ['1'],
      activePass: ['1'],
      activeMy: ['1'],
      us: '',
      password: '',
      thing: {
        wait: 2,
        complete: 0,
        apply: 0,
        checked: 0
      }
    }
  },
  methods: {
    onSubmit(values)
    {
      console.log('submit', values)
    }
  }
}
</script>

<style scoped>
.banner {
  height: 3rem;
  line-height: 3rem;
  background: #226ce2;
  color: #fff;
  margin-bottom: 3rem;
}
.numTitle {
  text-align: left;
}
.countNumber {
  text-align: center;
  color: #68b0f6;
}
.quck {
  margin-top: 2rem;
}
.addApply {
  color: #fff;
  margin: 1rem 0;
  background: #68b0f6;
  background-image: linear-gradient(
    to right,
    #278bf5,
    #86bffc,
    #98c6f7
  ); /* 标准的语法（必须放在最后） */
}
.moveApply {
  color: #fff;
  margin: 1rem 0;
  background: #f59043;
  background-image: linear-gradient(
    to right,
    #fa581c,
    #f59043,
    #fca789
  ); /* 标准的语法（必须放在最后） */
}
.serverApply {
  color: #fff;
  margin: 1rem 0;
  background: #52f576;
  background-image: linear-gradient(
    to right,
    #43f279,
    #52f576,
    #a0fab4
  ); /* 标准的语法（必须放在最后） */
}
</style>
